<template>
  <div class="_wz_InsuranceCost">
    <Card dis-hover style="margin:0 0 10px 0;">
      <p slot="title">保单信息</p>
      <Form ref="formAdd" :model="requiredParameter" label-position="right" :label-width="100">
        <Row>
          <i-col span="24">
            <i-col span="8">
              <FormItem label="保单年份" prop="wzInsuranceYearNumber">
                <DatePicker type="year" v-model="requiredParameter.wzInsuranceYearNumber" placeholder="请选择保单年份" :disabled="formType == 'modify'" style="width: 100%" @on-change="onBeginTime"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="保险车型" prop="insuranceModelType">
                <i-select v-model.number="requiredParameter.insuranceModelType" filterable placeholder="请选择保险车型" :label-in-value="true" @on-change="insuranceModelTypeFun" :disabled="formType == 'modify'">
                  <Option :value="1">运输车辆</Option>
                  <Option :value="2">货运挂车</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="保险车辆" prop="refVehicleTrailerUuid">
                <i-select v-model="requiredParameter.refVehicleTrailerUuid" filterable placeholder="请选择保险车辆" :label-in-value="true" clearable @on-change="insuranceVehicleTrailerPlateNoFun" :disabled="formType == 'modify'">
                  <Option v-if="requiredParameter.insuranceModelType == 1" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.carPlateNo}}</Option>
                  <Option v-if="requiredParameter.insuranceModelType == 2" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.trailerPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
          </i-col>
        </Row>
      </Form>
    </Card>
    <vehicleBriefly :vehicleBrieflyData="vehicleBrieflyData"></vehicleBriefly>
    <Card dis-hover style="height:100%;overflow: hidden;">
      <p slot="title">保险险种明细</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Modal :title="formTitle" v-model="formOperation" :footer-hide="true" width="1000">
      <insuranceAdd :updateData="updateData" v-if="formOperation" :requiredParameter="requiredParameter" @refreshList="refreshList"></insuranceAdd>
    </Modal>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  import insuranceAdd from './insuranceAdd.vue'
  import vehicleBriefly from '../expire/vehicleBriefly.vue'
  import wzTbale from "../../../components/table/table";
  /*
    * 1.添加
    *   选择年份后  车牌号  车辆类型  车辆uuid 年份传输add页面  有效期限制在选择年份
    *   提交后刷新外层表格
    * 2.修改
    *   年份 车牌号 车辆类型 不可以修改
    *   选择年份后  车牌号  车辆类型  车辆uuid 年份传输add页面  有效期限制在选择年份
    *   提交后刷新外层表格
    * */
  export default {
    props: ["selectData", "formType"],//接收来自父组件的数据
    components: {
      insuranceAdd,//添加
      vehicleBriefly,//车辆基本信息
      wzTbale,//列表
    },
    data() {
      return {
        spinShow:false,//本页加载
        vehicleBrieflyData: null,//车辆简述
        carList: [],//车和挂车List
        formTitle: "",
        formOperation: false,
        //列表使用
        requiredParameter: {},
        updateData: null,//修改数据
        //车辆基本信息
        carFormData: {},

        tableData: {
          url: '',//this.apiUrl.webApi + "/management/insurance/record/list",//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '保险项目', minWidth: 120, key: 'insuranceTypeValue'},
            {title: '保险公司', minWidth: 120, key: 'insuranceCompanyValue'},
            {title: '生效日期', minWidth: 120, key: 'insuranceEffectiveDate'},
            {title: '到期日期', minWidth: 120, key: 'insuranceExpireDate'},
            {title: '保险全费', minWidth: 120, key: 'insuranceFullFee'},
            {title: '净费实收', minWidth: 120, key: 'insuranceNetFee'},
            {title: '登记人', minWidth: 120, key: 'insuranceRegistrantName'},
            {
              title: '操作', fixed: 'right', width: 120, render: (h, params) => {
                let operationButtons = [];
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.updateData = JSON.parse(JSON.stringify(params.row));
                      this.formTitle = "修改";
                      this.formOperation = true;
                    }
                  }
                }, '修改'))
                operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.deleteInsurance(params.row);
                    }
                  }
                }, '删除'))
                return h('div', operationButtons);
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },


      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态insuranceTypeValue
      let that = this;
      if (that.formType == 'modify') {//修改进来 加载列表
        that.requiredParameter.insuranceYearNumber = that.selectData.insuranceYearNumber;//保险年份
        that.requiredParameter.insuranceModelType = that.selectData.insuranceModelType;//车辆类型

        //加载车辆
        that.insuranceModelTypeFun({value: that.selectData.insuranceModelType});
        that.requiredParameter.wzInsuranceYearNumber = that.selectData.insuranceYearNumber;//保险年份
        that.requiredParameter.refVehicleTrailerUuid = that.selectData.refVehicleTrailerUuid;//车辆数据


        //修改进来  拼接完成数据 出发加载表格
        that.searchSubmit();

        //车辆简述
        that.vehicleBrieflyData = {
          modelType: that.selectData.insuranceModelType,
          value: that.selectData.refVehicleTrailerUuid
        };
      }

    },
    methods: {//执行的方法
      //保险车型 查询对应的车 还是挂车list
      insuranceModelTypeFun(e) {
        let that = this;
        if (!!e) {
          if (e.value == 1) {//车辆
            that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList",{}).then(res => {
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {//挂车
            that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerList",{}).then(res => {
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          }

        } else {//清空数据
          //清空 保险车牌   //清空 车数据
          that.carList = [];
        }
      },
      //保险车牌号
      insuranceVehicleTrailerPlateNoFun(e) {
        let that = this;
        if (!!e) {
          that.requiredParameter.insuranceVehicleTrailerPlateNo = e.label;
          if (!!that.requiredParameter.insuranceYearNumber) {
            that.searchSubmit();
          }
        } else {
          that.requiredParameter.insuranceVehicleTrailerPlateNo = '';
        }

        e = !!e ? e : {};
        if (!!that.requiredParameter.insuranceModelType) {
          e.modelType = that.requiredParameter.insuranceModelType;
        }
        that.vehicleBrieflyData = e;
      },
      //保险年份
      onBeginTime(data) {
        let that = this;
        if (!!data) {
          that.requiredParameter.insuranceYearNumber = data;
          if (!!that.requiredParameter.refVehicleTrailerUuid) {
            that.searchSubmit();
          }
        }
      },
      //保单删除
      deleteInsurance(data) {
        let that = this;
        that.$Modal.confirm({
          title: '删除提醒',
          content: '确定要删除选中的记录？',
          onOk: () => {
            that.spinShow = true;//显示加载
            that.axios.post(that.apiUrl.webApi + "/management/insurance/insuranceDelete" ,{uuid: data.uuid}).then(res => {
              that.spinShow = false;//
              if (!!res) {
                that.searchSubmit();
                that.$Message.success("删除成功");
                that.$emit("closeFun");
              }
            }).catch(err => {
              console.log("失败", err)
            })
          },
          onCancel: () => {
            //点击取消
          }
        });
      },
      //刷新列表
      refreshList(data) {
        if (data) {
          this.searchSubmit();
        }
        this.formOperation = false;
        this.$emit("closeFun");
      },
      //添加
      addTableData() {
        let that = this;
        if (!!!that.requiredParameter.insuranceModelType) {
          this.$Message.error('请选择保险车型');
          return false;
        }
        if (!!!that.requiredParameter.refVehicleTrailerUuid) {
          this.$Message.error('请选择保险车辆');
          return false;
        }
        if (!!!that.requiredParameter.wzInsuranceYearNumber) {
          this.$Message.error('请选择保险年份');
          return false;
        }
        that.updateData = null;
        that.formTitle = "添加";
        that.formOperation = true;
      },
      searchSubmit() {//搜索
        this.tableData.url = this.apiUrl.webApi + "/management/insurance/insuranceList";//请求地址
        this.tableData.where = JSON.parse(JSON.stringify(this.requiredParameter));
        this.$refs.wzTbale.tableLoadData(true);
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_InsuranceCost {

    display: flex;
    flex-direction: column;
    height: 100%;


    .ivu-card-body {
      height: calc(100% - 51px);
      padding: 10px;
    }


    .demo-upload-list {
      margin: auto;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          margin: auto;
          color: #fff;
          font-size: 40px;
          cursor: pointer;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: flex;
    }
  }


</style>
